<template>
  <div class="goods-item" @click="goodsItem">
<img v-lazy="showImg" class="img">
<div class="goods-info">
  <p class="title">{{goodsitem.title}}</p>

  <span class="price">{{goodsitem.price}}</span>
  <span class="collect"><span class="iconfont icon-shoucang"></span>{{goodsitem.cfav}}</span>
</div>
  </div>
</template>

<script>
  export default {
    
    props:{
      goodsitem:{
        type:Object,
        default(){
          return {}
        }
      }
    },
		methods:{
			goodsItem(){
				this.$router.push('/detail/' + this.goodsitem.iid)
			}
		},
    computed:{
      showImg(){
       return this.goodsitem.image || this.goodsitem.show.img
      }
    }
  }
</script>

<style>
  .goods-item{
    display: flex;
    flex-wrap: wrap; 
    width: 48%;
    align-items: center;
    text-align: center;
  }
  .goods-info{
    width: 100%;
  }
  .img{
    border-radius: 5px;
    width: 100%;
  }
  .title{
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    margin: 5px 0;
  }
  .price{
    color:  var(--color-high-text);
    margin-right: 5px;
  }
</style>
